<template>
  <view v-if="modelValue" class="modal-overlay" @tap.stop="closeModal">
    <view class="modal-container" @tap.stop="">
      <!-- 弹窗头部 -->
      <view class="modal-header">
        <view class="modal-title">核销详情</view>
        <view class="close-btn" @tap="closeModal">
          <text class="close-icon">×</text>
        </view>
      </view>

      <!-- 弹窗内容 -->
      <view class="modal-content">
        <!-- 核销人信息 -->
        <view class="detail-item">
          <view class="detail-label">核销人：{{ orderData.producerName || '暂无' }}</view>
        </view>

        <!-- 核销时间 -->
        <view class="detail-item">
          <view class="detail-label">核销时间：{{ formatTime(orderData.updateTime) || '暂无' }}</view>
        </view>

        <!-- 备注信息 -->
        <view class="detail-item">
          <view class="detail-label">备注：{{ orderData.remarks || '暂无备注' }}</view>
        </view>

        <!-- 附件图片 -->
        <view class="detail-item" v-if="orderData.picUrl && orderData.picUrl.length > 0">
          <view class="detail-label">附件图片：</view>
          <view class="images-container">
            <view
              class="image-item"
              v-for="(imageUrl, index) in orderData.picUrl"
              :key="index"
              @tap="previewImage(imageUrl, index)"
            >
              <image
                :src="imageUrl"
                mode="aspectFill"
                class="attachment-image"
                :lazy-load="true"
              />
            </view>
          </view>
        </view>

        <!-- 无附件提示 -->
        <view class="detail-item" v-else>
          <view class="detail-label">附件图片：</view>
          <view class="detail-value no-attachment">暂无附件</view>
        </view>
      </view>

      <!-- 弹窗底部 -->
      <view class="modal-footer">
        <button class="confirm-btn" @tap="closeModal">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { defineProps, defineEmits } from 'vue'
  import { formatDate } from '@/sheep/helper/utils'

  // 定义 props
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    },
    orderData: {
      type: Object,
      default: () => ({})
    }
  })

  // 定义 emits
  const emit = defineEmits(['update:modelValue'])

  // 关闭弹窗
  function closeModal() {
    emit('update:modelValue', false)
  }

  // 格式化时间
  function formatTime(time) {
    if (!time) return ''
    return formatDate(time)
  }

  // 预览图片
  function previewImage(currentUrl, currentIndex) {
    const urls = props.orderData.picUrl || []
    uni.previewImage({
      current: currentIndex,
      urls: urls
    })
  }
</script>

<style lang="scss" scoped>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .modal-container {
    width: 90%;
    max-width: 600rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 32rpx 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }

  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .close-btn {
    width: 48rpx;
    height: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #f5f5f5;
  }

  .close-icon {
    font-size: 36rpx;
    color: #666;
    line-height: 1;
  }

  .modal-content {
    flex: 1;
    padding: 32rpx;
    overflow-y: auto;
  }

  .detail-item {
    margin-bottom: 32rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .detail-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 12rpx;
    font-weight: 500;
  }

  .detail-value {
    font-size: 30rpx;
    color: #333;
    line-height: 1.5;
  }

  .remarks-content {
    background-color: #f8f9fa;
    padding: 20rpx;
    border-radius: 8rpx;
    min-height: 80rpx;
    word-wrap: break-word;
  }

  .no-attachment {
    color: #999;
    font-style: italic;
  }

  .images-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
  }

  .image-item {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    overflow: hidden;
    background-color: #f5f5f5;
    position: relative;
  }

  .attachment-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .modal-footer {
    padding: 24rpx 32rpx 32rpx;
    border-top: 1rpx solid #f0f0f0;
  }

  .confirm-btn {
    width: 100%;
    height: 80rpx;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    border: none;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .confirm-btn:active {
    opacity: 0.8;
  }
</style>

